<template>
<div style="text-align: right;">
      <div class="person_body clear">
          <div class="person_tree l">
              <el-tabs v-model="activeNametab" class="demo-tabs">
                <el-tab-pane label="组织架构" name="first">
                  <vxe-table
                    show-overflow
                    ref="terrTable"
                    height="440"
                    size="mini"
                    :show-header="false"
                    :tree-config="{transform: true, rowField: 'id', parentField: 'pid'}"
                    :row-config="{isCurrent: true, isHover: true}"
                    @cellDblclick="handleNodeClick"
                    :data="departments.childList">
                    <vxe-column field="name" title="部门人员" tree-node>
                      <template #default="{ row }">
                        <i v-if="row.types==='d'" class="vxe-icon-flow-branch" ></i> <i v-else="row.types==='d'" class="vxe-icon-user" ></i><span style="margin-left: 10px">{{row.name}}</span>
                      </template>
                    </vxe-column>
                  </vxe-table>
                </el-tab-pane>
                <el-tab-pane label="角色列表" name="second">
                    <p v-for="item in departments.employees" :key="item" @click="handleNodeClick(item,true)">{{item.name}}</p>
                </el-tab-pane>
              </el-tabs>
          </div>
          <div class="has_selected l">
              <p class="clear">已选（{{departments.selected.length}})
                  <a @click="delList">清空</a>
              </p>
              <ul>
                <li v-for="item in departments.selected" :key="item" @dblclick="rowList(item)">{{item.name}}</li>
              </ul>
          </div>
      </div>
      <div>
        <span class="dialog-footer">
            <el-button @click="showfe">取消</el-button>
            <el-button type="primary" @click="showtr">确定</el-button>
        </span>
      </div>
</div>
</template>
<script>
import {onMounted, ref} from 'vue'
import {orgtree} from "/@/api/linkoo/templates/index"
import {getRole} from "/@/api/linkoo/templates";
import XEUtils from "xe-utils"
import {getWorkFlowUsers} from "/@/api/linkoo/workflow";
export default {
  props:['visible','data','isDepartment','all'],
  emits:['submitsxm','sxdown'],
  setup(props,ctx){
    const terrTable = ref()
    let departments = ref({
        childList: [],
        employees: [],
        selected: []
    })
    let ip = ref(false)
    let activeNametab = ref('first')
    onMounted(()=>{
      getWorkFlowUsers().then((res)=>{
          departments.value.childList=res.data.list
      })
      getRole().then((res)=>{
        console.log(res.data.list)
        departments.value.employees=res.data.list
      })
    })
    const handleNodeClick = (item,bus)=>{
      if(bus===true){item['type']='r'}else{
        item=XEUtils.clone(terrTable.value.getCurrentRecord())
        delete item['children']
        delete item['_X_ROW_CHILD']
        delete item['_X_ROW_KEY']
      }
      if(props.all){
        if(!XEUtils.includes(departments.value.selected, item)){

          departments.value.selected.push(item)
        }
      }else{
        if(item.type!=='d'){
          if(!XEUtils.includes(departments.value.selected, item)){
            departments.value.selected.push(item)
          }
        }
      }
    }
    const rowList=(item)=>{
      XEUtils.remove(departments.value.selected,items=>items===item)
    }
    const delList = ()=>{
      departments.value.selected=[]
    }
    const showtr=()=>{
      ctx.emit('submitsxm',false,departments.value.selected)
      delList()
    }
    const showfe = ()=>{
      ctx.emit('sxdown',false)
    }
    const customNodeClass = (data)=>{
      console.log(data);
      if(data.type==='d'){
        return 'eg'
      }else{
        return 'eg2'
      }
    }
    return {
      departments,
      activeNametab,ip,
      terrTable,
      customNodeClass,
      handleNodeClick,
      rowList,
      delList,
      showtr,
      showfe
    }
  }
}
</script>

<style>
.person_body {
  display: flex;
  border: 1px solid #f5f5f5;
  height: 540px;
  margin-bottom: 10px;
  text-align: left;
  /* overflow: hidden; */
}
.person_tree .vxe-table--render-default.size--mini .vxe-body--column.col--ellipsis{
  line-height: 36px !important;
}
.eg{
  color: #0101017d;
}
.eg2{
  color: #000000;
}
.tree_nav span {
  display: inline-block;
  padding-right: 10px;
  margin-right: 5px;
  max-width: 6em;
  color: #38adff;
  font-size: 12px;
  cursor: pointer;
}
.tree_nav span:last-of-type {
  background: none;
}
.person_tree {
  padding: 10px 12px 0 8px;
  width: 280px;
  height: 100%;
  border-right: 1px solid #f5f5f5;
}
.person_tree input {
  padding-left: 22px;
  width: 210px;
  height: 30px;
  font-size: 12px;
  border-radius: 2px;
  border: 1px solid #d5dadf;
  background-size: 14px 14px;
  margin-bottom: 14px;
}
.person_tree ul,
.has_selected ul {
    height: 420px;
    overflow-y: auto;
}
.person_tree li {
    padding: 5px 0;
}
.person_tree li i {
    float: right;
    padding-left: 24px;
    padding-right: 10px;
    color: #3195f8;
    font-size: 12px;
    cursor: pointer;
    border-left: 1px solid rgb(238, 238, 238);
}
.person_tree li a.active + i {
    color: rgb(197, 197, 197);
    pointer-events: none;
}
.person_tree img {
    width: 14px;
    vertical-align: middle;
    margin-right: 5px;
}

.has_selected {
  width: 276px;
  height: 100%;
  font-size: 12px;
}
.has_selected ul {
  height: 460px;
}
.has_selected p {
  padding-left: 19px;
  padding-right: 20px;
  line-height: 37px;
  border-bottom: 1px solid #f2f2f2;
}
.has_selected p a {
  float: right;
}
.has_selected ul li {
  margin: 11px 26px 13px 19px;
  line-height: 17px;
}
.has_selected li span {
  vertical-align: middle;
}
.has_selected li img:first-of-type {
  width: 14px;
  vertical-align: middle;
  margin-right: 5px;
}
.has_selected li img:last-of-type {
  float: right;
  margin-top: 2px;
  width: 14px;
}
td, th {
  padding: 0;
  vertical-align: middle;
}
</style>